<%@page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-common/taglibs.jsp" />
<c:set var="menu" value="client" scope="request" />

<html>
<head>
<title>Clients</title>
<script type="text/javascript">
   $(document).ready(function () {
      $("#searchButton").jqxButton({ theme: getSowTheme('ui-redmond') });
      
      var source = {
         datatype: "json",
         datafields: [
			{ name: 'id' },
            { name: 'name' },
            { name: 'subdomain' },
            { name: 'email' },
            { name: 'phone' },
            { name: 'status' }
         ],
         id: 'id',
         url: "<c:url value='/clients/search' />",
         async: false
      };

      var dataAdapter = new $.jqx.dataAdapter(source);
      var renderer = function (row, column, value, html) {
         return '<a href="client/' + dataAdapter.records[row].id + '">' + html + '</a>';
      };

      $("#clientGrid").jqxGrid(
      {
         width: 870,
         source: dataAdapter,
         theme: getTheme(),
         columnsresize: true,
         pageable: true,
         autoheight: true,
         sortable: true,
         altrows: true,
         columns: [
            { text: 'Name', datafield: 'name', minwidth: 140 , cellsrenderer: renderer },
            { text: 'Sub Domain', datafield: 'subdomain', width: 160},
            { text: 'Contact Email', datafield: 'email', width: 210 },
            { text: 'Contact Phone', datafield: 'phone', width: 150 },
            { text: 'Status', datafield: 'status', width: 100, columntype: 'checkbox' }
         ]
      });

      $("#searchButton").click(function () {
         var name = $("input[name='name']").val();
         var subdomain = $("input[name='subdomain']").val();
         source.url = "<c:url value='/clients/search' />?name=" + name + "&subdomain=" + subdomain;
         dataAdapter.dataBind();
      });
   });

   function openDiaglog(title) {
      $("#clientDialog").dialog({
         title: title,
         resizable: false,
         draggable: false,
         modal: true,
         width: 470,
         buttons: {
            "Save": function() {
               saveClient();
   			},
   			Cancel: function() {
   				$(this).dialog("close");
   			}
         }
      });
   }
   
   function openDeleteDiaglog() {
      var selectedIndex = $("#clientGrid").jqxGrid('getselectedrowindex');
      //alert(selectedIndex);
      if(selectedIndex < 0) {
         alert("Please select a row.");
         return;
      }

      $("#dialog-confirm").dialog({
         resizable: false,
         draggable: false,
         modal: true,
         width: 300,
         buttons: {
            "Delete all items": function() {
               deleteClient();
   			},
   			Cancel: function() {
   				$(this).dialog("close");
   			}
         }
      });
   }

   function closeDiaglog() {
      $('#clientDialog').dialog('close');
   }

   function addClient() {
      $("#clientDialog").load("<c:url value='/ajax/client' />");
      openDiaglog("Add New Client");
   }

   function editClient() {
      var selectedIndex = $("#clientGrid").jqxGrid('getselectedrowindex');
      if(selectedIndex < 0) {
         alert("Please select a row.");
         return;
      }

      var id = $("#clientGrid").jqxGrid('getrowid', selectedIndex);
      $("#clientDialog").load("<c:url value='/ajax/client' />?id=" + id);
      openDiaglog("Edit Client");
   }

   function saveClient() {
      $.ajax({
         url : "<c:url value='/ajax/client/save' />",
         type : "POST",
         data: $('#clientForm').serialize(),
         dataType : "html",
         success : function(data) {
            if($(data).first().attr("id") == "error") {
        	   $("#clientDialog").html(data);
            } else {
                closeDiaglog();
                $("#clientGrid").jqxGrid("source").dataBind();
            }
         }
      });
   }

   function deleteClient() {
      $('#dialog-confirm').dialog('close');

      var selectedIndex = $("#clientGrid").jqxGrid('getselectedrowindex');
      var id = $("#clientGrid").jqxGrid('getrowid', selectedIndex);
      $.ajax({
         url : "<c:url value='/ajax/client/delete' />",
         type : "POST",
         data : { id: id },
         dataType : "html",
         success : function(data) {
            if(data == "error") {
        	   alert('error!!');
        	   return;
            }

            $("#clientGrid").jqxGrid("source").dataBind();
         },
         error : function(){
            alert('error');
         }
      });
   }
</script>
</head>

<body>
   <div class="cubeTitleWrapper">
      <span class="cube_title">Clients</span>
   </div>

   <div class="cube">
      <div>
         <div class="contentwrapper">
            <div class="contentcolumn">
               <div class="innertube">
                  <h2 class="userDefinedBg curved">Search</h2>
                  <div class="contentBlock">
                     <form name="searchForm">
                     <table style="border-spacing: 2px;">
                        <tr>
                           <td>Name: </td><td><input type="text" name="name" size="25" class="text ui-widget-content ui-corner-all" style="height: 22px" /></td>
                           <td width="10">&nbsp;</td>
                           <td>Sub Domain: </td><td><input type="text" name="subdomain" size="25" class="text ui-widget-content ui-corner-all" style="height: 22px" /></td>
                           <td width="10">&nbsp;</td>
                           <td><input id="searchButton" type="button" value="Search" style="cursor: pointer;" /></td>
                        </tr>
                     </table>
                     </form>
                  </div>
                  <div class="contentBlock_bottom"><span class="right_end"><span></span></span></div>

                  <h2 class="userDefinedBg curved">Clients</h2>
                  <div class="contentBlock">
                     <div id="clientGrid">No results found</div>
                  </div>
                  <div class="contentBlock_bottom"><span class="right_end"><span></span></span></div>
               </div>
            </div>
         </div>

         <div class="rightcolumn">
            <div class="innertube">
               <h2 class="userDefinedBg"><span class="right_end"><span class="start">Tools</span></span></h2>
               <div class="contentBlock">
                  <ul class="toolbox userDefinedColor">
                     <li class="userDefinedBg"><a class="add_link add-sow" href="javascript:addClient()">Add New Client</a></li>
                     <li class="userDefinedBg"><a class="add_link edit" href="javascript:editClient()">Edit Selected Client</a></li>
                     <li class="delete"><a class="add_link delete" href="javascript:openDeleteDiaglog()">Delete Selected Client(s)</a></li>
                  </ul>
               </div>
               <div class="contentBlock_bottom"><span class="right_end"><span></span></span></div>
            </div>
         </div>
      </div>
   </div>
   
   <div id="clientDialog" style="display: none;"></div>
   <div id="dialog-confirm" title="Delete selected client(s)?" style="display: none;">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These clients will be permanently deleted and cannot be recovered. Are you sure?</p>
   </div>
</body>
</html>